<template>
  <div class='subject-Stat'>
    <el-card class="onlinePeople-card">
      <el-tabs v-model="activeName"
               @tab-click="handleClick">
        <!-- 销售量 -->
        <el-tab-pane label="销售量"
                     name="first">
          <div class="coursesonline">
            <div ref="chart"
                 v-if="this.activeName==='first'"
                 :style="{width: '1360px' , height: '100%' }"></div>
          </div>
        </el-tab-pane>
        <!-- 学生人数 -->
        <el-tab-pane label="学生人数"
                     name="second">
          <div class="coursesonline">
            <div ref="chart1"
                 style="width:100%;height:100%"></div>
          </div>
        </el-tab-pane>
        <!-- 销售额 -->
        <el-tab-pane label="销售额"
                     name="third">
          <div class="coursesonline">
            <div ref="chart2"
                 style="width:100%;height:100%"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="bodyRight">
        <!-- 按周,月,年 -->
        <div class="bodyRightL">
          <el-button size="small"
                     @click="onWeekData"
                     :class="{buttonbgc:isWeekShow}">按周</el-button>
          <el-button size="small"
                     @click="onMonthData"
                     :class="{buttonbgc:isMonthShow}">按月</el-button>
          <el-button size="small"
                     @click="onYearData"
                     :class="{buttonbgc:isYearShow}">按年</el-button>
        </div>
        <!-- 日期选择器 -->
        <div class="bodyRightR">
          <div class="block">
            <el-date-picker v-model="time"
                            :type="isdate"
                            :format="format"
                            placeholder="选择日期"
                            size="small"
                            @change="dateChange">
            </el-date-picker>

          </div>
        </div>
      </div>
    </el-card>

    <div class="empty"></div>

    <!--整个页面内容是个卡片-->
    <el-card class="onlinePeople-card2">
      <!-- 表格 -->
      <el-table :data="tabList"
                style="width: 100%"
                border
                highlight-current-row
                :header-cell-style="{'text-align':'center',background:'#F5F7FA',color:'#888', height: 60 + 'px'}"
                :cell-style="{'text-align':'center'}"
                :row-style="{height: 50 + 'px'}">
        <el-table-column type="index"
                         label="排名">
        </el-table-column>
        <el-table-column prop="subjectName"
                         label="热门学科">
        </el-table-column>
        <el-table-column prop="saleNum"
                         label="销量">
        </el-table-column>
        <el-table-column prop="salePercent"
                         label="销量增幅">
        </el-table-column>
        <el-table-column prop="userNum"
                         label="学生人数">
        </el-table-column>
        <el-table-column prop="userPercent"
                         label="学生人数增幅">
        </el-table-column>
        <el-table-column prop="saleAmount"
                         label="销售额">
        </el-table-column>
        <el-table-column prop="amountPercent"
                         label="销售额增幅">
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pagenum"
                     :page-sizes="[10, 20, 30, 50]"
                     :page-size="pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import {getSubjectStat} from '@/api/course.js'
export default {
    name: 'subjectStat',
    components: {},
    props: {},
    data () {
      return {
        isWeekShow:true,
        isMonthShow:false,
        isYearShow:false,
        isdate:'week',
        time:new Date(),
        format:'yyyy 年 第 WW 周',
        pickerFormat:'yyyy 年 第 WW 周',
        datePickerSel:this.$options.filters['week'](new Date()),
        activeName:'first',
        category:[],
        barData:[],
        startDate:'',
        endDate:'',
        mindate:0,
        maxdate:0,
        tabList: [], // 表格渲染数据
        pagenum: 1,  // 默认显示的页码
			  pagesize: 10,  // 每页显示条数
			  total: 0  // 总数
      }
    },
    computed: {},
    watch: {},
    methods: {
      onWeekData(){
        this.isWeekShow=true
        this.isMonthShow=false
        this.isYearShow=false
        this.isdate='week'
        this.format='yyyy 年 第 WW 周'
        this.datePickerSel=this.$options.filters['week'](this.time).toString()
        this.dateChange()
        this.disciplineRanking()
        
      },
      onMonthData(){
        this.isWeekShow=false
        this.isMonthShow=true
        this.isYearShow=false
        this.format='yyyy 年 M 月'
        this.isdate='month'
        this.datePickerSel=this.$options.filters['month'](this.time).toString()
        console.log(this.datePickerSel);
        this.startDate=this.datePickerSel+'-01'
        this.endDate=this.datePickerSel+'-30'
        this.loadFrequency()
        this.disciplineRanking()
        
      },
      onYearData(){
        this.isWeekShow=false
        this.isMonthShow=false
        this.isYearShow=true
        this.isdate='year'
        this.format='yyyy 年'
        this.datePickerSel=this.$options.filters['year'](this.time).toString()
        this.startDate=this.datePickerSel+'-01-01'
        this.endDate=this.datePickerSel+'-12-31'
        this.loadFrequency()
        this.disciplineRanking()
        
      },
      dateChange(){
          if(this.isdate==='month'){
            this.onMonthData()
          }else if(this.isdate==='year'){
            this.onYearData()
          }else{
            var d = new Date(this.time)
            // 起始日期
            var youWant = d.getFullYear() + '-' + (d.getMonth() + 1 + '').padStart(2, '0') + '-' + (d.getDate() - 1 + '').padStart(2, '0')

            // 终止日期
            var d2 = new Date(+new Date(this.time) + 5 * 86400000)
            var youWant2 = d2.getFullYear() + '-' + (d2.getMonth() + 1 + '').padStart(2, '0') + '-' + (d2.getDate() + '').padStart(2, '0')
            
            this.startDate=youWant
            this.endDate=youWant2

            this.loadFrequency()
          }
      },
      async loadFrequency(){     
        this.category=[]
        this.barData=[]
        const {data:res}= await getSubjectStat({
            datePickerSel:this.datePickerSel,
            type:this.isdate
        })

        // 设置分页
        var startPage = (this.pagenum - 1) * this.pagesize
        var endPage = this.pagenum * this.pagesize
        console.log(startPage,endPage)

        this.tabList = res.result.slice(startPage ,endPage)
        this.total = res.result.length

        if(this.activeName==='first'){
          res.result.forEach(item=>{
            this.category.push(item.subjectName)
            this.barData.push(item.saleNum)  
          })
        }else if(this.activeName==='second'){
          res.result.forEach(item=>{
            this.category.push(item.subjectName)
            this.barData.push(item.userNum)  
          })
        }else if(this.activeName==='third'){
          res.result.forEach(item=>{
            this.category.push(item.subjectName)
            this.barData.push(item.saleAmount)  
          })
        }
        console.log(this.barData); 
      },
      handleClick(){
        this.loadFrequency()
      },
      disciplineRanking(){
        if(this.activeName==='first'){
          setTimeout(() => {
          const chart = this.$refs.chart
          if(this.isdate==='week'){
              this.mindate= -0.4
              this.maxdate= -0.16
          }else if(this.isdate==='month'){
              this.mindate=0
              this.maxdate=10000
          }else{
              this.mindate=0
              this.maxdate=10000
          }
        if (chart) {
            const myChart = this.$echarts.init(chart)
                //初始化数据          
            var option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              lineStyle: {
                  color:'#2075f1'
              },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: {
                  type: 'category',
                  data: this.category,
                  splitLine: {show: false},
                  axisLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  }
              },
              yAxis: {
                min:this.mindate,  //取0为最小刻度
                max: this.maxdate, //取100为最大刻度
                  type: 'value',
                  axisLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  offset: 10,
                  nameTextStyle: {
                      fontSize: 15
                  }
              },
              series: [
                  {
                      type: 'bar',
                      data: this.barData,
                      barWidth: 16,
                      barGap: 10,
                      smooth: true,
                      label: {
                          normal: {
                              // show: true,
                              position: 'right',
                              offset: [5, -2],
                              textStyle: {
                                  color: '#F68300',
                                  fontSize: 13
                              }
                          }
                      },
                      itemStyle: {
                          emphasis: {
                              barBorderRadius: 7
                          },
                          normal: {
                              barBorderRadius: 7,
                              color: new echarts.graphic.LinearGradient(
                                  0, 0, 1, 0,
                                  [
                                      {offset: 0, color: '#3977E6'},
                                      {offset: 1, color: '#37BBF8'}
      
                                  ]
                              )
                          }
                      }
                  }
              ]
          };
          myChart.setOption(option);
                
                window.addEventListener("resize", function() {
                  myChart.resize()
                })
              }
              this.$on('hook:destroyed',()=>{
                window.removeEventListener("resize", function() {
                  myChart.resize();
                });
                })
        }, 0);
        }else if(this.activeName==='second'){
          setTimeout(() => {
                    const chart = this.$refs.chart1
                    if(this.isdate==='week'){
                        this.mindate=0
                        this.maxdate=10000
                    }else if(this.isdate==='month'){
                        this.mindate=0
                        this.maxdate=10000
                    }else{
                        this.mindate=0
                        this.maxdate=100000
                    }
                  if (chart) {
                      const myChart = this.$echarts.init(chart)
                          //初始化数据          
                      var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: this.category,
                            splitLine: {show: false},
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        yAxis: {
                          min:this.mindate,  //取0为最小刻度
                          max: this.maxdate, //取100为最大刻度
                            type: 'value',
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            offset: 10,
                            nameTextStyle: {
                                fontSize: 15
                            }
                        },
                        series: [
                            {
                                type: 'bar',
                                data: this.barData,
                                barWidth: 16,
                                barGap: 10,
                                smooth: true,
                                label: {
                                    normal: {
                                        // show: true,
                                        position: 'right',
                                        offset: [5, -2],
                                        textStyle: {
                                            color: '#F68300',
                                            fontSize: 13
                                        }
                                    }
                                },
                                itemStyle: {
                                    emphasis: {
                                        barBorderRadius: 7
                                    },
                                    normal: {
                                        barBorderRadius: 7,
                                        color: new echarts.graphic.LinearGradient(
                                            0, 0, 1, 0,
                                            [
                                                {offset: 0, color: '#3977E6'},
                                                {offset: 1, color: '#37BBF8'}
                
                                            ]
                                        )
                                    }
                                }
                            }
                        ]
                    };
                    myChart.setOption(option);
                          
                          window.addEventListener("resize", function() {
                            myChart.resize()
                          })
                        }
                        this.$on('hook:destroyed',()=>{
                          window.removeEventListener("resize", function() {
                            myChart.resize();
                          });
                          })
                  }, 0);
        }else if(this.activeName==='third'){
          setTimeout(() => {
                    const chart = this.$refs.chart2
                    if(this.isdate==='week'){
                        this.mindate=0
                        this.maxdate=1000
                    }else if(this.isdate==='month'){
                        this.mindate=100
                        this.maxdate=900
                    }else{
                        this.mindate=0
                        this.maxdate=8000000
                    }
                  if (chart) {
                      const myChart = this.$echarts.init(chart)
                          //初始化数据          
                      var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: this.category,
                            splitLine: {show: false},
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            }
                        },
                        yAxis: {
                          min:this.mindate,  //取0为最小刻度
                          max: this.maxdate, //取100为最大刻度
                            type: 'value',
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            offset: 10,
                            nameTextStyle: {
                                fontSize: 15
                            }
                        },
                        series: [
                            {
                                type: 'bar',
                                data: this.barData,
                                barWidth: 16,
                                barGap: 10,
                                smooth: true,
                                label: {
                                    normal: {
                                        // show: true,
                                        position: 'right',
                                        offset: [5, -2],
                                        textStyle: {
                                            color: '#F68300',
                                            fontSize: 13
                                        }
                                    }
                                },
                                itemStyle: {
                                    emphasis: {
                                        barBorderRadius: 7
                                    },
                                    normal: {
                                        barBorderRadius: 7,
                                        color: new echarts.graphic.LinearGradient(
                                            0, 0, 1, 0,
                                            [
                                                {offset: 0, color: '#3977E6'},
                                                {offset: 1, color: '#37BBF8'}
                
                                            ]
                                        )
                                    }
                                }
                            }
                        ]
                    };
                    myChart.setOption(option);
                          
                          window.addEventListener("resize", function() {
                            myChart.resize()
                          })
                        }
                        this.$on('hook:destroyed',()=>{
                          window.removeEventListener("resize", function() {
                            myChart.resize();
                          });
                          })
                  }, 0);
        }
      },
      // 分页
      handleSizeChange(newSize) {
        this.pagesize = newSize
        // console.log(this.pagesize)
        this.pagenum = 1

        this.loadFrequency()
      },
      handleCurrentChange(newNum) {
        this.pagenum = newNum
        // console.log(this.pagenum)
        
        this.loadFrequency()
      }
    },
    updated () {
      this.disciplineRanking()
    },
    created () {
      this.dateChange()
    },
    mounted () {
      this.disciplineRanking()
    },
}
</script>
<style lang='less' scoped>
.subject-Stat {
  position: relative;
  // height: 520px;
  // padding: 25px;
  // background-color: #fff;
  margin-top: 15px;
  color: #444444 !important;
  border-radius: 6px;
  /deep/ .el-tabs__nav-wrap::after {
    display: none;
  }
  /deep/ .el-tabs__item {
    font-size: 16px !important;
  }
  /deep/ .el-tabs__active-bar {
    height: 4px !important;
    background-color: #65ded7 !important;
    border-radius: 4px;
  }
  /deep/ .el-tabs__item.is-active {
    color: #185fef !important;
  }
  /deep/ .el-button {
    border: none !important;
  }
  .el-button:hover, .el-button:focus {
    color: teal;
    border-color: #b3d9d9;
    background-color: #e6f2f2;
  }
  .buttonbgc {
    background-color: #079fff;
    color: #fff;
  }
  .grid-date {
    padding-left: 25px;
  }
  .grid-right {
    margin-top: 10px;
  }
  .coursesonline {
    height: 500px;
    width: 1230px !important;
    // background-color: pink;
  }
  .bodyRight {
    width: 500px;
    position: absolute;
    right: 0px;
    top: 27px;
    .bodyRightR {
      margin-left: 30px;
    }
  }
  .bodyRight > div {
    display: inline-block;
  }
}
.empty {
  height: 20px;
  background-color: #f5f5f5;
}
.onlinePeople-card2 {
  .el-table {
    margin-bottom: 20px;
  }
  .el-pagination {
    float: right;
  }
}
</style>